import React from 'react'

/**
 * 受控组件, 就是将 HTML 中的 value 值统一交给 React 的 state 处理
 */
class Handler extends React.Component {
  state = {
    inputVal: '',    // 输入框初始化
    textareaVal: '', // 文本域初始化
    selectVal: '',   // 下拉框初始化
    isChecked: false // 复选框初始化
  }

  // 输入框
  changeInputVal = (e) => {
    this.setState({
      inputVal: e.target.val
    })
  }

  // 文本域
  changeTextareaVal = (e) => {
    this.setState({
      textareaVal: e.target.value
    })
  }

  // 下拉框
  changeSelectVal = (e) => {
    this.setState({
      selectVal: e.target.value
    })
  }

  // 复选框
  changeChecked = (e) => {
    this.setState({
      // isChecked: !this.state.isChecked
      isChecked: e.target.checked
    })
  }
  render() {
    return (
      <div>
        <p>
          {/* 文本框 */}
          <input type="text" value={ this.state.inputVal } onChange={ this.changeInputVal }/>
        </p>
        <p>
          {/* 文本域 */}
          <textarea value={ this.state.textareaVal } onChange={ this.changeTextareaVal }></textarea>
        </p>
        <p>
          {/* 下拉框 */}
          <select value={ this.state.selectVal } onChange={ this.changeSelectVal }>
            <option value="zhangsan">张三</option>
            <option value="lisi">李四</option>
            <option value="wangwu">王五</option>
          </select>
        </p>
        <p>
          {/* 复选框 */}
          <input type="checkbox" checked={ this.state.isChecked } onChange={ this.changeChecked }/>
        </p>
      </div>
    )
  }
}

export default Handler